@import "/css-modules/variable/common.less";
@import "/css-modules/common/icon.less";
@import "/css-modules/mixins/text.less";

.s-cascader {
    display: inline-block;
    vertical-align: middle;
    outline: none;
    width: 152px;
    height: 32px;
    padding: 0 8px;
    outline: none;
    border: 1px solid @input-border;
    border-radius: 2px;
    position: relative;
    .icon-chevron-down {
        display: inline-block;
        position: absolute;
        width: 16px;
        height: 16px;
        right: 8px;
        top: 0;
        bottom: 0;
        font-size: @font-16;
        color: @tip-font;
        margin: auto;
    }
    .s-cascader-label {
        webkit-appearance: none;
        box-sizing: border-box;
        display: inline-block;
        cursor: pointer;
        width: 100%;
        height: 100%;
        font-size: @font-12;
        line-height: 32px;
        color: @main-font;
        .text-overflow;
    }
}

@keyframes up {
    from {
        transform: 0;
    }
    to {
        transform: rotateZ(-180deg);
    }
}

@keyframes down {
    from {
        transform: rotateZ(-180deg);
    }
    to {
        transform: rotateZ(0deg);
    }
}


.ro180 {
    animation: .8s up forwards;
}

.s-cascader {
    .yo-contain {
        width: 152px;
        padding: 5px 12px 5px 8px;
        height: 200px;
        background-color: #fff;
        position: absolute;
        left: -1px;
        top: 31px;
        outline: none;
        border: 1px solid @input-border;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 999;
        .yo-contain-item {
            display: inline-block;
            width: 100%;
            padding-right: 4px;
            height: 32px;
            line-height: 32px;
            outline: none;
            position: relative;
            cursor: pointer;
            .iconfont {
                position: absolute;
                right: 2px;
                font-size: @font-12;
                color: @tip-font;
            }
            .text-overflow;
            .yo-contain-text {
                font-size: @font-12;
                color: @main-font;
            }
            &:hover {
                border-bottom: 1px solid @input-border;
                .yo-contain-text, .iconfont {
                    color: @basic-tab-active;
                }
            }
        }
    }
}
.yo-item-active {
    .yo-contain-text, .iconfont {
        color: @basic-tab-active !important;
    }
}